CSS breakpoints for responsive design

Responsive web design is an approach that ensures webpages render properly across all screen sizes and resolutions while ensuring high usability.

In this article, we’ll look at the evolution of responsive design, from media queries to grid systems, container queries, and, finally, fluid design. We’ll discuss the role of breakpoints in responsive design, reviewing different methods of choosing breakpoints and some best practices.

Jump ahead:

HTML is fundamentally responsive. If you create a webpage using only HTML and resize the window, the browser will automatically adjust the text to fit the viewport. But your content won’t look good on every screen!

For example, long lines of text can be difficult to read on a wide monitor. Similarly, if the line length is reduced with CSS by creating columns or adding a margin, the content may look squashed when viewed on a mobile device. You have to intervene to adapt the style to the screen based on the content and layout of your webpage.

The term responsive design was coined by Ethan Marcotte in 2010 and described using fluid grids, fluid images, and media queries to create responsive content. At the time, the recommendation was to use float for layout and media queries to query the browser width or height to create layouts for different breakpoints.

A breakpoint is the point, usually a specific width, at which a webpage’s style is adapted in a particular way in order to provide the best possible user experience. Fluid images were set not to exceed the width of their container by setting their max-width property to 100%. The prevailing attitude was to control every pixel of a layout for a given screen size.

Frameworks like Bootstrap rose in popularity as they provided developers with responsive grid systems. This contributed to a shift in the way we build and think about webpages. With the advent of design systems, there is a tendency to think in terms of components rather than pages. We combine components to make up a page and want them to live side by side without having to write a lot of CSS to create a harmonious layout.

With modern CSS, less intervention is required to resize or change layouts for different screen sizes. Layout methods such as CSS flexbox and grid have responsive capabilities, and other modern methods have been developed to make content responsive:

In 2018, Jen Simmons introduced the term “Intrinsic Web Design” in her talk “Everything You Know About Web Design Just Changed.” Here are her three principles of intrinsic web design:

Today, more people generally advocate going with the grain with regard to how content adapts to the space available. As Andy Bell put it recently, maybe our preference should be to “be the browser’s mentor, not its micromanager.”

With the recent introduction of container queries, we are entering a new era of responsive design. Container queries allow us to look at a container size and apply styles to the content based on the size of their container rather than the viewport or other device characteristics. I see this more as an evolution than a revolution because now CSS can align more easily with component-based thinking.

Some people see container queries as a departure from what came before because now a design can be largely independent of the viewport size. However, container queries still involve breakpoints. So, we still need to consider where and when (at what point) to change the style of content.

While we have moved on from float for layouts, media queries are still relevant. They are just required less frequently than before. People have been predicting the end of media queries with the introduction of container queries, but container queries do not solve everything. Media queries still have a seat at the table. It will take some maturation before the roles are worked out with more clarity.

Let’s cover media queries first before we dive into breakpoints.

Media queries are useful when you want to modify the layout or appearance of your site depending on specific characteristics such as the screen resolution of the device or the browser viewport width or height.

A media query is composed of:

The common syntax for a CSS media query is as follows:

The logical operators not, and, only, and or can be used to compose a complex media query.

For responsive design, min-width and max-width are the most commonly used media features. They enable styles to be based on the width of the viewport. For example, the following CSS code will apply styles only if the browser’s viewport width is equal to or less than 80em:

You can also use height (height, min-height, and max-height), aspect-ratio, resolution, and orientation in media feature expressions to deal with the viewport’s dimensions and different aspects of the screen.

The Media Queries Level 4 specification includes some syntax improvements to make media features that have a less verbose “range” type, e.g., width. With this syntax improvement, our previous max-width example could be written like so: